//登陆页面
import React, { Component } from 'react'
import pxPage from '../root/pxPage'
import { HashRouter as Router, Route, Switch } from 'react-router-dom'
import { withRouter } from "react-router-dom";
import { Toast } from 'antd-mobile'
import { denglu,zhece } from '../redux/actionCreator'
import { connect } from 'react-redux'
import {Login_tim} from '../TIM/actiontim'
import {getMsg} from '../redux/actionCreator'
const deviceHight = document.documentElement.clientHeight
const loginimgone = {
    width: pxPage(164),
    height: pxPage(164),
    transform: [{ rotate: '45deg' }],
    position: 'absolute',
    top: pxPage(0),
    right: pxPage(0),
}
const loginbutton = {
    width: pxPage(60),
    height: pxPage(60),
    position: 'absolute',
    right: pxPage(16),
    bottom: pxPage(270)
}
const logintextone = {
    position: 'absolute',
    left: pxPage(36),
    top: pxPage(200),
}
const logindiv = {
    width: pxPage(375),
    height: pxPage(300),
    backgroundColor: '#fff',
    position: 'absolute',
    left: pxPage(0),
    bottom: pxPage(0),
}
const loginimgtwo = {
    width: pxPage(24),
    height: pxPage(24),
    position: 'absolute',
    left: pxPage(35),
    top: pxPage(46),
}
const userlogindiv = {
    position: 'absolute',
    left: pxPage(36),
    top: pxPage(15)
}
const logindivthree = {
    width: pxPage(90),
    height: pxPage(25),
    position: 'absolute',
    right: pxPage(35),
    bottom: pxPage(24)
}
const logindivtwo = {
    width: pxPage(200),
    height: pxPage(25),
    position: 'absolute',
    left: pxPage(36),
    bottom: pxPage(24)
}
const userlogininputone = {
    width: pxPage(280),
    height: pxPage(47),
    position: 'absolute',
    left: pxPage(36),
    top: pxPage(112)
}
const userlogininputtwo = {
    width: pxPage(280),
    height: pxPage(47),
    position: 'absolute',
    left: pxPage(36),
    top: pxPage(176)
}
const userlogininputthree = {
    width: pxPage(280),
    height: pxPage(47),
    position: 'absolute',
    left: pxPage(36),
    top: pxPage(112 - 64)
}
const loginbuttontwo = {
    width: pxPage(60),
    height: pxPage(60),
    position: 'absolute',
    left: pxPage(16),
    top: pxPage(16),
}
const emailLogindivone = {
    position: 'absolute',
    top: pxPage(15),
    right: pxPage(30),
    fontSize: pxPage(40)
}
const emailLogindivtwo = {
    position: 'absolute',
    top: pxPage(75),
    right: pxPage(30)
}
const emailLoginbuttonone = {
    width: pxPage(280),
    height: pxPage(47),
    position: 'absolute',
    left: pxPage(36),
    bottom: pxPage(15),
    backgroundColor: '#fff'
}
const userlogininput = {
    width: pxPage(155),
    height: pxPage(47),
    position: 'absolute',
    left: pxPage(36),
    top: pxPage(176)
}
const emailLoginbuttontwo = {
    width: pxPage(120),
    height: pxPage(47),
    position: 'absolute',
    left: pxPage(36 + 160),
    top: pxPage(176)
}

class Login extends Component {
    //将获取的输入存到这里，存的时候进行校验，如果合法存入然后根据点击的调用不同的函数进行传参，以达到
    //还有一个中间路由没得搞
    constructor(props) {
        super(props);
        this.state = {
            tel: '',
            password: '',
            password1: ''
        }

        this.handleChangetel = this.handleChangetel.bind(this)
        this.handleChangepassword = this.handleChangepassword.bind(this)
        this.handleChangepassword1 = this.handleChangepassword1.bind(this)
    }
    //下面是三种登陆函数上面是一些基础的样式
    //默认的登录页，先检查本地是否有用户信息，如果不存在就跳转到登录页
    //获取用户输入的信息存到setState之中，点击的时候进行验证或者是发送
    //关于报错信息的返回，以及对用户的相应的提示！！！
    successToast() {
        Toast.info('恭喜你你他妈登陆成功了', 2);
    }
    // errToastont() {
    //     Toast.info('账号错误或密码错误！', 2)
    // }
    errToasttwo() {
        Toast.info('账号或密码不能为空！', 2)
    }
    errToastthree() {
        Toast.info('账号不符合规范！', 2)
    }
    errToast(msg) {
        Toast.info(`${msg}`, 2)
    }

    handleChangetel(e) {
        this.setState({ tel: e.target.value })
    }
    handleChangepassword(e) {
        this.setState({ password: e.target.value })
    }
    handleChangepassword1(e) {
        this.setState({ password1: e.target.value })
    }
    userLogin = () => {
        return <>
            <button
                className='login-button'
                style={loginbutton}
                onClick={() => {//跳转前先进行判断，如果说没有登陆就跳转到登陆页面
                    if (this.state.tel === '' || this.state.password === '') {
                        this.errToasttwo()
                    }
                    else if (!/^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/.test(this.state.tel)) {
                        this.errToastthree()
                    } else {
                        // Login_tim(getMsg(this.props).user_tel,getMsg(this.props).user_sig)
                        
                        this.props.dispatch(denglu(this.state.tel, this.state.password,this.props))
                    }
                }}
            >
                <img
                    className='login-img-four'
                    src='./images/fas fa-arrow-right.svg'
                    alt=''
                ></img>
            </button>
            <div className='userlogin-div' style={userlogindiv}>请登录</div>
            <form>
                <input
                    className='userlogin-form-input-one'
                    style={userlogininputone}
                    placeholder='用户名/电话号码/邮箱'
                    // 暂时只支持电话号码
                    autoComplete='new-password'
                    value={this.state.tel}
                    onChange={this.handleChangetel}
                >
                </input>
                <input
                    className='userlogin-form-input-two'
                    style={userlogininputtwo}
                    type='password'
                    placeholder='密码'
                    autoComplete='new-password'
                    value={this.state.password}
                    onChange={this.handleChangepassword}
                >
                </input>
            </form>
            <div className='login-div-two'
                style={logindivtwo}
                onClick={() => {
                    this.props.history.push('/login/2')
                }}
            >手机验证码登录</div>

            <div className='login-div-three'
                style={logindivthree}
                onClick={() => {
                    this.props.history.push('/login/3')
                }}
            >注册</div>
        </>
    }
    //手机号验证码登录的页面
    emailLogin = () => {
        return <>
            <button
                className='emailLogin-img-two'
                style={loginbuttontwo}
                onClick={() => {//跳转前先进行判断，如果说没有登陆就跳转到登陆页面
                    this.props.history.push('/login')
                }}
            >
                <img
                    className='login-img-four login-img-four-puls'
                    src='./images/fas fa-arrow-right.svg'
                    alt=''
                ></img>
            </button>
            <div className='emailLogin-div-one'
                style={emailLogindivone}
            >手机验证</div>
            <div className='emailLogin-div-two'
                style={emailLogindivtwo}
            >请您输入您的手机号，完成登录</div>
            <form>
                <input
                    className='userlogin-form-input-one'
                    style={userlogininputone}
                    placeholder='电话号码'
                    autoComplete='new-password'
                >
                </input>
                <input
                    // 改成与获取验证码拼接在一起的
                    className='userlogin-form-input-two radius-right-dis'
                    style={userlogininput}
                    type='number'
                    placeholder='验证码'
                >
                </input>
                <button className='emailLogin-button-one'
                    style={emailLoginbuttonone}
                >登录</button>
                <button className='emailLogin-button-two'
                    style={emailLoginbuttontwo}
                >获取验证码</button>
            </form>
        </>
    }

    // const handpassword = (e)=>{
    //     // console.log(e)
    //     setPassword(e.target.value)
    //     console.log(password)
    //     // console.log()
    // }
    //注册的页面
    register = () => {
        return <>
            <div className='userlogin-div' style={userlogindiv}>创建账号</div>
            <form>
                <input
                    className='userlogin-form-input-one'
                    style={userlogininputone}
                    placeholder='输入密码'
                    autoComplete='new-password'
                    type='password'
                    value={this.state.password}
                    onChange={this.handleChangepassword}
                >
                </input>
                <input
                    className='userlogin-form-input-two'
                    style={userlogininputtwo}
                    type='password'
                    placeholder='确认密码'
                    autoComplete='new-password'
                    value={this.state.password1}
                    onChange={this.handleChangepassword1}
                >
                </input>
                <input
                    className='userlogin-form-input-three'
                    style={userlogininputthree}
                    placeholder='电话号码/邮箱'
                    autoComplete='new-password'
                    value={this.state.tel}
                    onChange={this.handleChangetel}
                >
                </input>
            </form>
            <div className='login-div-three'
                style={logindivthree}
                onClick={() => {
                    this.props.history.push('/login')
                }}
            >返回登录</div>
            <div className='login-div-two'
                style={logindivtwo}
                onClick={() => {
                    if (this.state.tel === '' || this.state.password === '') {
                        this.errToasttwo()
                    }
                    else if (!/^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/.test(this.state.tel)) {
                        this.errToastthree()
                    } else {
                        zhece(this.state.tel, this.state.password, this.state.password1)
                    }
                }}
            >注册</div>
        </>
    }
    //前后端交互函数
    //最后的成品应该将进入的button去掉，改成数据fetch到的时候进入首页亦或是登陆页面
    //这个个页面负责的是获取登录页的信息并fetch到数据库
    render() {
        return (
            <div className='login' style={{ height: (deviceHight), backgroundColor: "black" }}>
                <img
                    className='login-img-one'
                    src='./images/v2_qdoinr.png'
                    alt=''
                    style={loginimgone}
                ></img>
                <img
                    className='login-img-two'
                    src='./images/fas fa-arrow-right Copy 2.svg'
                    alt=''
                    style={loginimgtwo}
                    onClick={() => {
                        this.props.history.push('/Choiseuser')//跳回最开始的页面
                    }}
                ></img>
                <div className='login-text-one' style={logintextone}>你好</div>
                <div className='login-div' style={logindiv}>

                    {/* 登录部分的路由 */}
                    {
                        <Router>
                            <Switch>
                                <Route exact path='/login' component={this.userLogin} />
                                <Route path='/login/2' component={this.emailLogin} />
                                <Route path='/login/3' component={this.register} />
                            </Switch>
                        </Router>

                    }
                </div>

            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    login: state.login
})
export default withRouter(connect(mapStateToProps)(Login))